<template>
  <div class="kefu">
    <header>
      <span @click="$back"
        ><van-icon name="arrow-left" color="#fff" size="18"
      /></span>
      <strong>{{ $t("language.kefu.name") }}</strong>
      <span></span>
    </header>
    <main>
      <Skeleton :loading="loading">
        <template #ske>
          <div style="width: 100%">
            <van-skeleton-image
              style="width: 100%; height: 150px; margin: 00px 0 10px 0"
            />

            <div
              style="
                width: 100%;
                display: flex;
                flex-direction: column;
                padding: 20px;
              "
            >
              <van-skeleton-paragraph
                style="
                  width: 100%;
                  height: 65px;
                  margin-bottom: 20px;
                  border-radius: 10px;
                "
              /><van-skeleton-paragraph
                style="
                  width: 100%;
                  height: 65px;
                  margin-bottom: 20px;
                  border-radius: 10px;
                "
              />
              <van-skeleton-paragraph
                style="
                  width: 100%;
                  height: 65px;
                  margin-bottom: 20px;
                  border-radius: 10px;
                "
              /><van-skeleton-paragraph
                style="
                  width: 100%;
                  height: 65px;
                  margin-bottom: 20px;
                  border-radius: 10px;
                "
              />
            </div>
          </div>
        </template>
        <template #main>
          <div class="bg"></div>
          <dl>
            <dd @click="jump('https://t.me/magicaplay_bot')">
              <img v-lazy="getImg('kefu1.png')" alt="" />
              <van-button color="#0a906c">{{
                $t("language.kefu.icon1")
              }}</van-button>
            </dd>
            <dd @click="jump('https://t.me/magicaplay_bot')">
              <img v-lazy="getImg('c27.jpg')" alt="" />
              <van-button
                color="#0a906c"
                
                >{{ $t("language.kefu.icon2") }}</van-button
              >
            </dd>
            <dd  @click="jump('https://m.facebook.com/')">
              <img v-lazy="getImg('c28.png')" alt="" /><van-button
                color="#0a906c"
                >{{ $t("language.kefu.icon3") }}</van-button
              >
            </dd>
            <dd>
              <img v-lazy="getImg('c29.png')" alt="" /><van-button
                color="#0a906c"
                >{{ $t("language.kefu.icon4") }}</van-button
              >
            </dd>
          </dl>
        </template>
      </Skeleton>
    </main>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref, onMounted } from "vue";
let loading = ref(true);
onMounted(() => {
  nextTick(() => {
    // loading.value = false;
    let time = setInterval(() => {
      loading.value = false;
      clearInterval(time);
    }, 500);
  });
});
let jump = (url: string) => {
  window.open(url);
};
const getImg = (url) => {
  return new URL(`../../assets/img/${url}`, import.meta.url).href;
};
</script>
<style scoped lang="scss" name="kefu">
.kefu {
  width: 100%;
  min-height: 100vh;
  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;
    span {
      display: block;
      height: 28px;
      width: 28px;
      line-height: 28px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  main {
    padding: 45px 0 120px;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    background-color: #161719;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
    .bg {
      width: 100%;
      height: 150px;
      background: url("@/assets/img/bg.png") no-repeat;
      background-size: cover;
    }
    dl {
      padding: 20px;
      dd {
        height: 65px;
        padding: 10px 15px;
        @include flex(row, space-between, center);
        border-radius: 10px;
        margin-bottom: 20px;
        background: #23262b;
        img {
          width: 45px;
          border-radius: 22.5px;
        }
        .van-button  {
          font-size: 12px;
          color: #fff;
          width: 130px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background: #0a906c;
          border-radius: 5px;
          border: none;
        }
      }
    }
  }
}
</style>
